import React, { Component } from 'react'
import { Platform, StyleSheet } from 'react-native'
import { SceneRendererProps, TabBar, TabView } from 'react-native-tab-view'
import Introduction from './Introduction'
import List from './List/index'

interface IRoute {
  key: string;
  title: string;
}

interface IState {
  routes: IRoute[];
  index: number;
}

interface IProps {

}

class Tab extends Component<IProps, IState> {

  state = {
    index: 1,
    routes: [
      {key: 'introduction', title: '简介', },
      {key: 'album', title: '节目', },

    ],
  }

  onIndexChange = (index: number) => {
    this.setState({index: index})
  }

  renderScene = ({route} : {route: IRoute}) => {
    switch(route.key) {
      case 'introduction':
        return <Introduction />
      case 'album':
        return <List />
    }
  }

  renderTabBar = (props: SceneRendererProps & {navigationState: IState}) => {
    return <TabBar 
      {...props} 
      scrollEnabled={true}
      tabStyle={styles.tabStyle}
      
      style={styles.tabbar}
      indicatorStyle={styles.indicator}
      labelStyle={styles.label}
      inactiveColor='#939393'
      activeColor='#333'
    />
  }

  render() {
    return (
      <TabView 
        navigationState={this.state} 
        onIndexChange={this.onIndexChange}
        renderScene={this.renderScene}
        renderTabBar={this.renderTabBar}
      />
    )
  }
}

const styles = StyleSheet.create({
  tabStyle: {
    width: 80
  },
  label: {
   fontSize: 20
  },
  tabbar: {
    backgroundColor: '#fff',
    ...Platform.select({
      android: {
        elevation: 0,
        borderBottomColor: '#e3e3e3',
        borderBottomWidth: StyleSheet.hairlineWidth
      }
    })
  },
  indicator: {
    backgroundColor: '#eb6d48',
    borderLeftWidth: 20,
    borderRightWidth: 20,
    borderColor: '#fff',
  }
})



export default Tab;